<template>
    <div>
        <Dialog :app-dialog="appDialog">
            <div>
                <ZwTable
                    ref="tableRef"
                    class="table-box"
                    :option="tableOption"
                    :row-key="getRowKey"
                    :param-prop="state.paramProp"
                    :fetch-params="state.searchParams"
                    :fetch-api="fetchApi()">
                </ZwTable>
            </div>
        </Dialog>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, watch } from 'vue';
import { deepCopy } from '@/utils/helper';
import Dialog from '@/components/Dialog.vue';
import ZwTable from '@/components/zw/table/Table';
import { getMemberLevelRecord } from '@/api/member/memberList/index';

const tableRef = ref<any>(null);

const levelList = [
    { label: '会员激活', value: 'active' },
    { label: '会员升级', value: 'up' },
    { label: '会员降级', value: 'degrade' }
];

const submitHandel = () => {
    appDialog.visible = false;
};

const appDialog = reactive<any>({
    visible: false,
    title: '等级变更明细',
    width: '50%',
    submit: submitHandel,
    submitText: '关闭'
});

const tableOption = [
    {
        prop: 'change_level_name',
        label: '新等级'
    },
    {
        prop: 'origin_level_name',
        label: '原等级'
    },
    {
        prop: 'level_change_type',
        label: '变更类型',
        width: 180,
        render({ row, column, index }: any) {
            const info: any = levelList.find(el => el.value == row.level_change_type) || {};
            return <div>{info.label}</div>;
        }
    },
    {
        prop: 'created_at',
        label: '变更时间'
    }
];

const defaultParams = {
    member_no: ''
};

const state = reactive({
    searchParams: deepCopy(defaultParams),
    paramProp: { page: 'page', pageSize: 'page_size' }
});

const getRowKey = (row: any) => {
    return row.id;
};

const fetchApi = () => {
    return getMemberLevelRecord;
};

watch(appDialog.visible, val => {
    if (val) {
        //
    }
});

defineExpose({
    appDialog,
    state
});
</script>
<style lang="scss" scoped></style>
